<template>
	<view>
		<u-navbar back-text="返回" :custom-back ="goBack" title="职位详情" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }"
		 back-icon-color="#108EE9">
			<view class="slot-wrap">
				<view class="topBox">
					<view class="top-fill">

					</view>
					<view class="clear-all">
						<view class="collect-img">
							<image src="../../../static/images/job/collect.png" mode=""></image>
						</view>
						<view class="report-img" @click="goReport">
							<image src="../../../static/images/job/report.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="top-box">
			招5人/剩2人
		</view>
		<view class="center-box">
			<view class="center-title">
				<view class="title-text">
					找木工
				</view>
				<view class="authicon-box">
					<image src="../../../static/images/home/authicon.png" mode=""></image>
				</view>
				<view class="job-status">
					招工中
				</view>
			</view>
			<view class="job-img-box">
				<block v-for="(item,index) in imgList" :key="index">
					<view class="item-img">
						<image src="../../../static/images/develop/messagedev.png" mode=""></image>
					</view>
				</block>
			</view>
			<view class="flex-item">
				<view class="item-left">
					到岗时间:
				</view>
				<view class="item-right">
					2020.05.02  15:30
				</view>
			</view>
			<view class="flex-item">
				<view class="item-left">
					用工时长:
				</view>
				<view class="item-right">
					20天
				</view>
			</view>
			<view class="flex-item">
				<view class="item-left">
					结算方式:
				</view>
				<view class="item-right">
					日结
				</view>
			</view>
			<view class="flex-item">
				<view class="item-left">
					薪资:
				</view>
				<view class="item-right">
					260/天
				</view>
			</view>
			<view class="flex-item">
				<view class="item-left">
					地址:
				</view>
				<view class="item-right">
					成都市桂溪街道天华社区 
					<span>
						导航
					</span>
				</view>
			</view>
			<view class="flex-item">
				<view class="item-left">
					发布时间:
				</view>
				<view class="item-right">
					2020.05.02  15:30
				</view>
			</view>
			<view class="flex-item">
				<view class="item-left">
					职位编号:
				</view>
				<view class="item-right">
					ZW12465
				</view>
			</view>
			<view class="describe-title">
				职位描述
			</view>
			<view class="describe-text">
				主要做后浇带施工缝剔打，胀模，爆模，拆墙等等一系列工作,我很优秀,是你的最佳选择!
			</view>
		</view>
		<view class="foot-content">
			<view class="job-title">
				相关职位
			</view>
			<block v-for="(item,index) in list" :key="index">
				<job-item :item="item">
					
				</job-item>
			</block>
		</view>
		<!-- 底部按钮 -->
		<view class="foot-box">
			<view class="call-phone">
				拨打电话
			</view>
			<view class="apply-btn">
				申请入职
			</view>
		</view>
		<!-- 底部按钮 -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				imgList:[1,2,3],
				list:[{id:1},{id:2}]
			}
		},
		methods:{
			goBack(){
				this.$u.route({
					type:'switchTab',
					url: 'pages/recruit/index'
				})
			},
			goReport(){
				this.$u.route({
					url: 'pages/recruit/report/add',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;

		.topBox {
			width: 100%;
			display: flex;

			.top-fill {
				flex: 1;
			}

			.clear-all {
				display: flex;
				.collect-img{
					width: 44rpx;
					height: 40rpx;
					image{
						width: 44rpx;
						height: 40rpx;
					}
				}
				.report-img{
					width: 38rpx;
					height: 40rpx;
					margin-left: 40rpx;
					image{
						width: 38rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
	.top-box{
		width:100%;
		height:80rpx;
		background:rgba(228,205,112,1);
		opacity:1;
		font-size:32rpx;
		font-weight:600;
		line-height:80rpx;
		color:rgba(51,51,51,1);
		opacity:1;
		text-align: center;
	}
	.center-box{
		padding: 30rpx;
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		border-bottom: 10rpx solid rgba(245,245,245,1);
		.center-title{
			width: 100%;
			display: flex;
			.title-text{
				font-size:36rpx;
				font-weight:bold;
				line-height:48rpx;
				color:rgba(51,51,51,1);
				opacity:1;
			}
			.authicon-box{
				width: 32rpx;
				height: 36rpx;
				margin-top: 6rpx;
				margin-left: 10rpx;
				image{
					width: 32rpx;
					height: 36rpx;
				}
			}
			.job-status{
				margin-left: 24rpx;
				background:rgba(17,142,233,1);
				border-radius:60rpx;
				padding: 0rpx 10rpx;
				font-size:22rpx;
				font-weight:400;
				line-height:40rpx;
				color:rgba(255,255,255,1);
				opacity:1;
				box-sizing: border-box;
				margin-top: 5rpx;
			}
		}
		.job-img-box{
			display: flex;
			margin-top: 40rpx;
			width: 100%;
			margin-bottom: 54rpx;
			.item-img{
				width: 31.1%;
				height: 160rpx;
				margin-left: 3%;
				&:first-child {
					margin-left: 0rpx;
				}
				image{
					width: 100%;
					height: 160rpx;
					border-radius:10rpx;
				}
			}
		}
		.flex-item{
			display: flex;
			width: 100%;
			justify-content: space-between;
			margin-top: 20rpx;
			&:last-child {
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid rgba(223,223,223,1);
			}
			.item-left{
				font-size:26rpx;
				font-weight:400;
				line-height:35rpx;
				color:rgba(153,153,153,1);
				opacity:1;
			}
			.item-right{
				font-size:28rpx;
				font-weight:400;
				line-height:37rpx;
				color:rgba(51,51,51,1);
				opacity:1;
				span{
					display: inline-block;
					margin-left: 20rpx;
					width:86rpx;
					height:40rpx;
					background:rgba(17,142,233,1);
					opacity:1;
					border-radius:60rpx;
					text-align: center;
					font-size:22rpx;
					line-height:40rpx;
					color:rgba(255,255,255,1);
					opacity:1;
				}
			}
		}
		.describe-title{
			margin-top: 40rpx;
			margin-bottom: 24rpx;
			font-size:28rpx;
			font-weight:400;
			line-height:37rpx;
			color:rgba(51,51,51,1);
			opacity:1;
		}
		.describe-text{
			font-size:24rpx;
			font-weight:400;
			line-height:32rpx;
			color:rgba(51,51,51,1);
			opacity:1;
		}
	}
	.foot-content{
		padding: 40rpx 30rpx;
		background: #FFFFFF;
		.job-title{
			font-size:28rpx;
			font-weight:400;
			line-height:37rpx;
			color:rgba(51,51,51,1);
			opacity:1;
		}
	}
	.foot-box{
		width: 100%;
		height:110rpx;
		background:rgba(255,255,255,1);
		box-shadow:0px -5rpx 20rpx rgba(0,0,0,0.1);
		opacity:1;
		display: flex;
		justify-content: space-around;
		padding: 10rpx 0;
		box-sizing: border-box;
		.call-phone{
			width:320rpx;
			height:90rpx;
			background:rgba(255,255,255,1);
			border:1rpx solid rgba(153,153,153,1);
			border-radius:8rpx;
			text-align: center;
			line-height: 90rpx;
			font-size:30rpx;
			font-weight:400;
			color:rgba(153,153,153,1);
			opacity:1;
		}
		.apply-btn{
			width:320rpx;
			height:90rpx;
			background:linear-gradient(180deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
			border-radius:8rpx;
			line-height: 90rpx;
			text-align: center;
			font-size:30rpx;
			font-weight:400;
			color:rgba(255,255,255,1);
			opacity:1;
		}
	}
</style>
